import React, { Fragment } from "react";
import { Input, Button, Select, Table } from "antd";
import VTable from "./component/VTable";
import { sortable } from "react-sortable";
import Item from "../sortable/Item";

const GlobalComponent = {
  Input,
  Button,
  Select,
  VTable,
};

class ElementComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content:props.content?props.content:[]
    };
  }

  onSortItems = (content) => {
    this.setState({
      content: content
    });
  }

  render() {
    var SortableItem = sortable(Item);

    const loop = (arr) =>
      arr.map((item, index) => {
        const ComponentInfo = GlobalComponent[item.name];
        return (
          <SortableItem
            key={index}
            onSortItems={this.onSortItems}
            items={arr}
            sortId={index}
          >
            <div style={{ padding: "10px" }}>
              <ComponentInfo key={index} id={item.id} {...item.attr} />
            </div>
          </SortableItem>
        );
      });

    return <Fragment>
      <ul className='sortable-list'>
      {loop(this.state.content)}
      </ul>
      
      </Fragment>;
  }
}

export default ElementComponent;
